<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- form表单标签 -->
    <form action="https://www.baidu.com">
        <div>用户名: <input type="text" name="username" placeholder="请输入用户名"></div>
        <div>密码: <input type="password" name="password" placeholder="请输入密码"> </div>
        <!-- 单选框 -->
        <!-- value 获取到的是数据，label 中放置的是给用户看的数据 -->
        <!-- 相同的 name 让浏览器知道是一组 -->
        <!-- label  for 关联指定标签的 id 属性，可以实现点字，等同于点标签 -->
        <div>
            <label for="boy"><input type="radio" name="sex" id="boy">男</label>
            <label for="girl"><input type="radio" name="sex" id="girl">女</label>
            <label for="ser"> <input type="radio" name="sex" id="ser">保密</label>
        </div>
        <!-- 复选框 -->
        <div>
            <label for="basketball"><input type="checkbox" id="basketball">篮球</label>
            <label for="sing"> <input type="checkbox" id="sing">唱</label>
            <label for="skip"> <input type="checkbox" id="skip">跳</label>
            <label for="rap"> <input type="checkbox" id="rap">rap</label>
        </div>
        <!-- 文本域 -->
        <div> <textarea name="" placeholder="评论一下"></textarea></div>
        <!-- 按钮 -->
        <!-- type 设置按钮的类型
          button 默认
          submit 提交，可以结合 form 表单 提交数据到指定的 url 地址，需要如果需要提交，需要给表单元素设置 name 属性
          name 等同于 key
          reset 重置表单，重置的是，所在 form 标签内部的元素
        -->
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>

    </form>

    <h2>输入关键字跳转百度搜索页</h2>
    <form action="https://www.baidu.com/s">
        <div> 输入内容跳转:<input type="text" name="wd"></div>
        <div>
            <button type="submit">提交</button>
        </div>
    </form>
</body>

</html>